<template>
	<view :class="['','zui_box','zui_box2','zui_box3'][types]">
		<!-- 获取状态栏与导航栏高度 -->
		<view :style="'height: ' + getHeaderHeight()+ 'px;'"></view>
		<!-- 页面主体 -->
		<view class="zui_body">
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			types: {
				type: String,
				default: '#95AEC7'
			},
			headerHeight: {
				type: Number,
				default: 44
			},
			bounding: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				have_prev:false,
				statusBarHeight: 44,
				iphoneXButtomHeight: 0,
				BoundingWidth: '0px'
			}
		},
		onLoad(e) {
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			// 没有上一页
			if (prevPage) {
				this.have_prev = true;
			} else {
				this.have_prev = false;
			}
		},
		created: function() {
			//获取状态栏高度
			try {
				var system = uni.getSystemInfoSync();
				system.model = system.model.replace(' ', '');
				system.model = system.model.toLowerCase();
				if (system.model.indexOf('iphonex') != -1 || system.model.indexOf('iphone11') != -1) {
					this.iphoneXButtomHeight = uni.upx2px(50);
				}
				
				this.statusBarHeight = system.statusBarHeight;
				// #ifdef MP-ALIPAY
				this.statusBarHeight = 0;
				// #endif
				// #ifndef MP-ALIPAY
				// #ifdef MP-WEIXIN
				// 小程序胶囊按钮
				var bounding = uni.getMenuButtonBoundingClientRect();
				this.BoundingWidth = (bounding.width + system.windowWidth - bounding.right + 10) + 'px';
				// #endif
				// #endif
			} catch (e) {
				return null;
			}
		},
		methods: {
			getHeaderHeight: function() {
				return this.headerHeight + this.statusBarHeight;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.zui_box {
		position: relative;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}
	
	.zui_box2{
		width: 100%;
		min-height:100vh ;
		height: auto;
		background: radial-gradient(circle at top right, #312648 0%, #312648 15%, #24193d 15%, #24193d 65%, #24193d 65%);
	}
	
	.zui_box3{
		width: 100%;
		min-height:100vh;
		height: auto;
		background:url('~@/static/img/vip_bg.png') no-repeat right 44rpx;
		background-color: #4D5A70;
		background-size:371rpx 371rpx;
	}
	
	

	.zui_body {
		width: 100%;
		height: auto;
		// flex: 1;
		// display: flex;
		// flex-direction: column;
		// background: #fff;
	}
	
</style>
